<template>
	<view>
		<view class="promotion_top">
			<view class="promotion_view">
				<view class="promotion_text">
					直推奖金
				</view>
				<view class="promotion_num">
					{{list.commission+'豆包'}}
				</view>
			</view>
			<view class="promotion_view">
				<view class="promotion_text">
					代理商数
				</view>
				<view class="promotion_num">
					{{list.count_agent}}
				</view>
			</view>
			<view class="promotion_view">
				<view class="promotion_text">
					间推奖金
				</view>
				<view class="promotion_num">
					{{list.Indirect_commission+'豆包'}}
				</view>
			</view>
		</view>
		<view class="changespread">
			<view class="" v-for="item in spreadList" :key="item.value" @click="getcontList(item.value)">
				{{item.name}}
			</view>
		</view>
		<scroll-view class="card_view" scroll-y @scrolltolower="scrolltolower">
			<view class="card_const" v-for="(item,index) in contList">
				<view class="line">
					<view class="line_left">
						<span class="left_name">用户昵称：</span>
						<span>{{item.username}}</span>
					</view>
					<view class="line_right">
						<span class="left_name">分销等级：</span>
						<span>{{item.spread_level == 1 ? '代理商' : '合伙人'}}</span>
					</view>
				</view>
				<view class="line">
					<view class="line_left">
						<span class="left_name">下级代理商数：</span> 
						<span>{{item.agentCount}}</span>
						
					</view>
					<view class="line_right">
						<span class="left_name">下级合伙人数：</span> 
						<span>{{item.partnerCount}}</span>
					</view>
				</view>
				<view class="line">
					<view class="line_left">
						<span class="left_name">直推奖：</span>  
						<span>{{item.commission}}豆包</span>
					</view>
					<view class="line_right">
						<span class="left_name">间推奖：</span>
						<span>{{item.Indirect_commission}}豆包</span>
					</view>
				</view>
				<view class="line">
					<view class="line_left">
						<span class="left_name">培育基金：</span>
						<span>{{item.train_fund}}豆包</span>
					</view>
					<view class="line_right">
						<span class="left_name">感恩奖：</span>
						<span>{{item.thank_reward}}豆包</span>
					</view>
				</view>
				<view class="">
					<span>推广企业名称：</span> <span>{{item.spreadEnterprise.name}}</span>
				</view>
			</view>
			<view class="button_text" @click="scrolltolower">
				{{bottonText}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getPromotion,
		getPromotionList
	} from '@/api/user.js'
	export default {
		data() {
			return {
				list: {},
				spreadList: [{
						name: '全部',
						value: '0'
					},
					{
						name: '合伙人',
						value: '1'
					},
					{
						name: '代理商',
						value: '2'
					}
				],
				formData: {
					"page": 1,
					"limit": 10,
					"spread_level": 0,
					"name": ""
				},
				cunt:0,// 总页数
				contList:[],
				bottonText:'加载更多'
			}
		},
		onLoad() {
			this.getList()
			this.getcontList()
		},
		methods: {
			clickspread(value) {
				console.log(va);
			},
			getcontList(value) {
				if(value){
					this.formData.spread_level = value
					this.contList = []
				}
				getPromotionList(this.formData).then(res => {
					this.cunt = res.data.count
					this.contList =this.contList.concat(res.data.list)
				})
			},
			getList() {
				getPromotion().then(res => {
					if (res.status == 200) {
						this.list = res.data
					}
				})
			},
			scrolltolower(){
				if(this.contList.length == this.cunt ) {
					this.bottonText = '暂无更多'
					return false
				}
				this.formData.page = this.formData.page + 1
				this.getcontList()
			}
		},
		
	}
</script>

<style scoped lang="scss">
	.promotion_top {
		height: 13vh;
		width: 100vw;
		background-color: #dc0000;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.promotion_view {
			color: #FFFFFF;
			display: flex;
			justify-content: space-around;
			flex-direction: column;
			height: 130rpx;
			align-items: center;

			.promotion_text {
				font-size: 12px;
			}

			.promotion_num {
				font-size: 16px;
			}
		}
	}

	.changespread {
		display: flex;
		width: 90vw;
		height: 5vh;
		margin-left: 5vw;
		justify-content: space-around;
		align-items: center;
		background: #e6e6e6;
	}
	.card_view{
		padding: 20rpx 30rpx;
		width: 100vw;
		overflow-y: scroll;
		height: 80vh;
		.card_const{
			width: 100%;
			background-color: #FFFFFF;
			margin-bottom: 10rpx;
			.line{
				display: flex;
				height: 50rpx;
				line-height: 50rpx;
				.line_left{
					width: 50%;
					.left_name{
						font-size: 14px;
						color: #000000;
					}
				}
				.line_right{
					width: 50%;
					.left_name{
						font-size: 14px;
						color: #000000;
					}
				}
			}
		}
	}
	.button_text{
		width: 100vw;
		text-align: center;
		height: 3vh;
	}
</style>